<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>博客园</title>
    <link rel="stylesheet" href="static/css/blog.css" />
  </head>
  <body>
    <div class="container">
      <header>
        <h1 class="header-title">博客园</h1>
        <button class="publish-btn" onclick="showPublishArticle()">
          发布文章
        </button>
      </header>

      <!-- 搜索和发布文章区域 -->
      <div class="search-section" id="search-page">
        <input type="text" id="search-input" placeholder="搜索文章标题" />
        <button onclick="searchArticles()">搜索</button>
      </div>

      <!-- 搜索结果展示区域 -->
      <div id="search-results"></div>

      <!-- 文章展示区域 -->
      <div id="all-articles" class="articles-section"></div>

      <!-- 发布文章区域 -->
      <div id="publish-page" class="hidden">
        <button onclick="returnToMain()">返回</button>
        <h2>发布文章</h2>
        <input type="text" id="article-title" placeholder="文章标题" required />
        <textarea
          id="article-content"
          placeholder="文章内容"
          required
        ></textarea>
        <button onclick="publishArticle()">发布</button>
      </div>
    </div>

    <!-- 文章内容和评论展示页面 -->
    <div id="article-page" class="hidden">
      <!-- 返回按钮 -->
      <button onclick="BackToSerachResults()">返回</button>

      <h2 id="article-page-title"></h2>
      <p id="article-page-author"></p>
      <p id="article-page-date"></p>
      <div id="article-page-content"></div>

      <h3>评论</h3>
      <div id="comments-section"></div>

      <!-- 评论输入框 -->
      <textarea id="comment-input" placeholder="添加评论"></textarea>
      <button onclick="submitComment()">提交评论</button>
    </div>

    <script src="static/js/blog.js"></script>
  </body>
</html>
